// <component>-[type]-[attrtype]-<attr>-[status]

// checked [false - default; true - primary]
@tag-default-background-color: @bg-color-component;
@tag-default-border-color: transparent;
@tag-default-hover-color: @brand-color-hover;
@tag-default-click-color: @brand-color-active;
@tag-default-disabled-color: @brand-color-disabled;
@tag-checked-color: @text-color-anti;
@tag-checked-background-color: @brand-color;
@tag-check-hover-bg: @bg-color-component-hover;
@tag-checked-hover-bg: @brand-color-hover;
@tag-default-click-bg: @bg-color-component-active;

@tag-grey-hover-color: @bg-color-component-hover;
@tag-grey-outline-disabled-color: @bg-color-component-disabled;
@tag-grey-outline-hover-color: @brand-color-hover;

// disabled
@tag-disabled-color: @text-color-disabled;
@tag-disabled-bg: @bg-color-component-disabled;

// dark color
@tag-primary-color: @brand-color;
@tag-success-color: @success-color;
@tag-warning-color: @warning-color;
@tag-danger-color: @error-color;

// light color
@tag-default-color-light: @bg-color-secondarycontainer;
@tag-primary-color-light: @brand-color-light;
@tag-success-color-light: @success-color-light;
@tag-warning-color-light: @warning-color-light;
@tag-error-color-light: @error-color-light;

// border
@tag-outline-default-border-color: @component-border;
@tag-outline-primary-border-color: @tag-primary-color;
@tag-outline-success-border-color: @tag-success-color;
@tag-outline-warning-border-color: @tag-warning-color;
@tag-outline-danger-border-color: @tag-danger-color;

// font size
@tag-small-font: @font-body-small;
@tag-medium-font: @font-body-small;
@tag-large-font: @font-body-medium;

// padding
@tag-small-padding: 0px @comp-paddingLR-xs;
@tag-medium-padding: 0px @comp-paddingLR-s;
@tag-large-padding: 0px @comp-paddingLR-m;

// text color
@tag-text-color: @text-color-anti;
@tag-default-text-color: @text-color-primary;

// shape
@tag-border-radius-square: @border-radius-default;
@tag-border-radius-round: @border-radius-extraLarge;

// width
@tag-default-border-width: 1px;

// height
@tag-height-small: @comp-size-xxs;
@tag-height-medium: @comp-size-xs;
@tag-height-large: @comp-size-m;

// icon
@tag-icon-size: calc(@font-size-base + 2px);
@tag-close-icon-color: @text-color-placeholder;
@tag-close-icon-hover-color: @text-color-primary;
@tag-close-icon-color--dark: @font-white-2;
@tag-close-icon-hover-color--dark: @font-white-1;

// link
@link-tag-hover-bg: @bg-color-component-hover;
@link-tag-hover-color: @brand-color;
@link-tag-active-bg: @bg-color-component-active;
@link-tag-active-color: @brand-color-active;

// margin
@tag-icon-margin-right: @comp-margin-xs;
@tag-close-icon-margin-right: @comp-margin-s;
@check-tag-margin-left: @comp-margin-s;
